<template>
	<view class="box">
    <musichead title="音乐" :icon="false"></musichead>
    <view class="box-scroll">
      <scroll-view scroll-y="true">
        <navigator class="box-scroll-search" :url="'/subpkg/searchs/searchs'">
          <text class="iconfont icon-search"></text>
          <input type="text" placeholder="搜索歌曲">
        </navigator>
        <navigator class="box-model" v-for="(i,index) in list" :key="index" :url="'/pages/lists/lists?id='+i.id">
          <view class="box-model-left">
            <image :src="i.coverImgUrl"></image>
          </view>
          <view class="box-model-right">
            <view class="box-model-right-text" v-for="(ii,index) in i.tracks" :key="index">{{index+1}}.{{ii.first}}-{{ii.second}}</view>
          </view>
        </navigator>
      </scroll-view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		  list:[],
			}
		},
    onLoad(){
     this.getList() 
    },
		methods: {
      async  getList(){
         let result = await uni.$http.get('/toplist/detail')
         if(result.data.code==200){
           this.list = result.data.list.slice(0,3)

         }
       },

		}
	}
</script>

<style scoped>
.box-scroll{
  width:100%;
  height:calc(100vh -75px);
}
.box-scroll scroll-view{
  height:100%
}
.box-scroll-search{
  display:flex;
  align-items: center;
  margin: 0rpx 56rpx;
  width:666rpx;
  height:80rpx;
  border-radius: 36rpx;
  background:#dedede;
}
.box-scroll-search text{
  margin-left:23rpx;
  font-size:34rpx;
}
.box-scroll-search input{
  margin-left:23rpx;
}
.box-model{
  display: flex;
  margin-top:36rpx;
  margin-left:40rpx;
}
.box-model-left image{
  width:260rpx;
  height:260rpx;
  border-radius: 16rpx;
  margin-top:26rpx;
}
.box-model-right{
  margin-left:12rpx;
  font-size:31rpx;
  font-weight: 566;
  color:#717171;
}
.box-model-right-text{
  margin:23rpx 0rpx;
}

</style>
